<template>
  <div>
    <el-row :gutter="24" class="f-system">
      <FBOX :span="6" :height="100" title="价格"  :count="10000" prefix="$"  icon="el-icon-camera-solid" iconColor="red"/>
      <FBOX :span="6" :height="100" title="价格"  :count="10000" prefix="$"  icon="el-icon-camera-solid" iconColor="red"/>
      <FBOX :span="6" :height="100" title="价格"  :count="10000" prefix="$"  icon="el-icon-camera-solid" iconColor="red"/>
      <FBOX :span="6" :height="100" title="价格"  :count="10000" prefix="$"  icon="el-icon-camera-solid" iconColor="red"/>
    </el-row>
    <el-row>
      <el-col :span="24">
        <FLine :height="300" title="折线图" subText="副标题" :chartData="LineData" :max="true" :min="true" :average="true" :area="false" :showTitle="false"/>
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="8">
        <FPie :height="300" title="饼图" subText="副标题" :chartData="peiData" :roseType="true" :radius="true" :showLegend="false"/>
      </el-col>
      <el-col :span="8">
        <FBar :height="300" title="柱形图" subText="副标题" :chartData="LineData" :max="true" :min="true" :average="true" :showLegend="true" :stack="false"/>
      </el-col>
      <el-col :span="8">
        <FRadar :height="300" title="雷达图" subText="副标题" :chartData="LineData" :showLegend="false" />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import FBOX from '@/components/f-box/f-box'
import FLine from '@/components/f-echarts/f-line'
import FPie from '@/components/f-echarts/f-pie'
import FBar from '@/components/f-echarts/f-bar'
import FRadar from '@/components/f-echarts/f-radar'

export default {
  data () {
    return {
      height: '100',
      LineData: [
        { group: '类型1', name: '1月', value: 10 },
        { group: '类型2', name: '1月', value: 15 },
        { group: '类型1', name: '2月', value: 25 },
        { group: '类型2', name: '2月', value: 12 },
        { group: '类型1', name: '3月', value: 22 },
        { group: '类型2', name: '3月', value: 12 }
       ],
      peiData: [
        { name: '1月', value: 15 },
        { name: '2月', value: 25 },
        { name: '3月', value: 22 },
        { name: '4月', value: 22 },
        { name: '5月', value: 22 },
        { name: '6月', value: 22 },
        { name: '7月', value: 22 },
        { name: '8月', value: 22 },
        { name: '9月', value: 22 }
      ]
    }
  },
  components: {
    FBOX,
    FLine,
    FPie,
    FBar,
    FRadar
  }
}
</script>

<style scoped>
  .el-row:not(:last-child){
    margin-bottom: 20px;
  }

</style>
